<template>
  <section id="product-section" class="product-section">
    <div class="container">
      <!-- 标题区域 -->
      <h2 class="section-title">产品介绍</h2>

      <!-- 主要内容布局 -->
      <div class="main-content-grid">
        <!-- 左侧卡片 - 多轮数据校验 -->
        <div class="left-card">
          <div class="data-validation-card"></div>
        </div>

        <!-- 右侧内容 -->
        <div class="right-content">
          <!-- 查看更多按钮 -->
          <div class="view-more-section">
            <button class="carousel-btn consult-btn">查看更多 -→</button>
          </div>

          <!-- 微小猪介绍卡片 -->
          <div class="flex weixiaozhu-card">
            <div class="">
              <h3 class="weixiaozhu-title">微小猪</h3>
              <p class="weixiaozhu-text" style="padding-right: 50px">
                互联网进入下半场由PC互联网进入移动互联网时代，移动手机成为了互联网主要载体，常规的PC企业门户网站很难适应现在的互联网环境，移动门户网站走进了微信、抖音时代。
              </p>
            </div>
            <img
              style="max-width: 180px"
              src="@/assets/home/zhu_card_back.png"
              alt=""
            />
          </div>
        </div>
      </div>

      <!-- 特性卡片区域 - 修改为图片样式 -->
      <div class="features-grid">
        <!-- 快速搭建 -->
        <div class="feature-card">
          <div class="feature-content one">
            <div class="feature-text">
              <h3 class="feature-title">快速搭建</h3>
              <ul class="feature-list">
                <li class="feature-item">可以私人定制</li>
                <li class="feature-item">能迅速完成框架构建</li>
                <li class="feature-item">可大幅缩短平台搭建周期</li>
              </ul>
            </div>
            <!-- <div class="feature-image">
              <img src="@/assets/home/product_section_3.png" alt="快速搭建" class="feature-img">
            </div> -->
          </div>
        </div>

        <!-- AI赋能智慧领航 -->
        <div class="feature-card">
          <div class="feature-content two">
            <div class="feature-text">
              <h3 class="feature-title">AI赋能智慧领航</h3>
              <ul class="feature-list">
                <li class="feature-item">文档智能生成优化</li>
                <li class="feature-item">数据自动趋势分析</li>
                <li class="feature-item">新增内容智能分发</li>
              </ul>
            </div>
            <!-- <div class="feature-image">
              <img
                src="@/assets/home/product_section_4.png"
                alt="AI赋能智慧领航"
                class="feature-img"
              />
            </div> -->
          </div>
        </div>

        <!-- 多元模板 -->
        <div class="feature-card">
          <div class="feature-content three">
            <div class="feature-text">
              <h3 class="feature-title">多元模板</h3>
              <ul class="feature-list">
                <li class="feature-item">丰富模板类型，满足多样需求</li>
                <li class="feature-item">便捷灵活配置，助力个性呈现</li>
                <li class="feature-item">高效复用效率，加速成果产出</li>
              </ul>
            </div>
            <!-- <div class="feature-image">
              <img
                src="@/assets/home/product_section_5.png"
                alt="多元模板"
                class="feature-img"
              />
            </div> -->
          </div>
        </div>

        <!-- 安全可靠 -->
        <div class="feature-card">
          <div class="feature-content four">
            <div class="feature-text">
              <h3 class="feature-title">安全可靠</h3>
              <ul class="feature-list">
                <li class="feature-item">数据备份与恢复</li>
                <li class="feature-item">多重安全防护体系</li>
                <li class="feature-item">合规认证保障</li>
              </ul>
            </div>
            <!-- <div class="feature-image">
              <img
                src="@/assets/home/product_section_6.png"
                alt="安全可靠"
                class="feature-img"
              />
            </div> -->
          </div>
        </div>
      </div>

      <!-- 客户合作信息 - 修改为图片样式 -->
      <div class="customer-info">
        <p class="customer-text">
          "20万+品牌企业与微小猪合作，解决各类商业问题。
        </p>
        <p class="customer-text">在商业领域树立起广泛且卓越的合作典范。“</p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "ProductSection",
};
</script>

<style scoped>
.product-section {
  padding: 60px 0;
  background-color: #ffffff;
}

.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 40px;
}

/* 主要内容网格布局 - 修改为图片样式 */
.main-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* gap: 30px; */
  margin-bottom: 60px;
  position: relative;
}

/* 左侧卡片 */
.left-card {
  background-color: #f1f8ff;
  border-radius: 50px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.data-validation-card {
  background-image: url("@/assets/home/product_section_1.png");
  position: relative;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  height: 458px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.validation-image {
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
}

.validation-tag {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 右侧内容区域 */
.right-content {
  display: flex;
  flex-direction: column;
  gap: 150px;
}

/* 查看更多按钮区域 */
.view-more-section {
  padding: 60px 0 0 60px;
  justify-content: flex-end;
}

/* 微小猪介绍卡片 */
.weixiaozhu-card {
  background-color: white;
  margin-left: -30px;
  border-radius: 12px;
  padding: 20px 0 0 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  border: 1px solid #f0f0f0;
}

.weixiaozhu-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("@/assets/home/product_section_1.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 120px 120px;
  opacity: 0.05;
  pointer-events: none;
}

.weixiaozhu-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

.weixiaozhu-text {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  position: relative;
  z-index: 1;
}

/* 特性卡片网格 - 修改为图片样式 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 20px;
}

/* 特性卡片样式 */
.feature-card {
  /* background-color: white; */
  border-radius: 50px;
  /* border: 1px solid #e8e8e8; */
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
  border: 4px solid #ffffff;
  background: #ffffff;
  box-shadow: inset -16px 0px 10px 0px rgba(183, 212, 246, 0.15),
    inset 16px 0px 10px 0px rgba(183, 212, 246, 0.15),
    inset 0px 19px 10px 0px rgba(183, 212, 246, 0.15);
  overflow: hidden;
  transition: all 0.3s ease;
}

.feature-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 特性卡片内容布局 */
.feature-content.one {
  background-image: url("@/assets/home/product_section_3.png");
  background-repeat: no-repeat;
  background-size: 27%;
  background-position: 5;
  background-position: 90%;
}
.feature-content.two {
  background-image: url("@/assets/home/product_section_4.png");
  background-repeat: no-repeat;
  background-size: 52%;
  background-position: 100%;
  background-position-y: 5px;
}
.feature-content.three {
  background-image: url("@/assets/home/product_section_5.png");
  background-repeat: no-repeat;
  background-size: 29%;
  background-position: 94%;
  background-position-y: 12px;
}
.feature-content.four {
  background-image: url("@/assets/home/product_section_6.png");
  background-repeat: no-repeat;
  background-size: 44%;
  background-position: 94%;
  background-position-y: -40px;
}
.feature-content {
  display: flex;
  flex-direction: row;
  height: 100%;
}

/* 特性文本区域 */
.feature-text {
  flex: 1;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 特性标题 */
.feature-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

/* 特性列表 */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-item {
  font-size: 14px;
  color: #666;
  line-height: 2.2;
  position: relative;
  padding-left: 20px;
}

.feature-item::before {
  content: "•";
  color: #1890ff;
  font-weight: bold;
  position: absolute;
  left: 0;
  font-size: 18px;
  line-height: 1.5;
}

/* 特性图片区域 */
.feature-image {
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  padding: 20px;
}

.feature-img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
}

/* 其余特性卡片样式保持不变 */
/* ... 此处省略其余特性卡片样式代码 ... */

/* 客户信息区域 - 保持原有样式 */
.customer-info {
  text-align: center;
  border-radius: 12px;
  margin-bottom: 20px;
}

.customer-text {
  font-family: Source Han Sans;
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
  color: #666;
  line-height: 1.8;
  font-style: italic;
}

/* 响应式设计 - 调整主要内容网格布局 */
@media (max-width: 1200px) {
  .container {
    width: 100%;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .main-content-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .view-more-section {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 24px;
  }

  .weixiaozhu-title {
    font-size: 18px;
  }

  .feature-title {
    font-size: 16px;
  }

  .customer-text {
    font-size: 14px;
  }
}
</style>
